<script>
import {defineComponent} from 'vue'
import actApi from "@/utils/api/actApi";
import catApi from "@/utils/api/catApi";
import ActItem from "@/views/act/components/ActItem.vue";
import PullRefreshList from "@/components/PullRefreshList.vue";
import BottomNavBar from "@/components/BottomNavBar.vue";
import actPage from "@/utils/pages/actPage";

export default defineComponent({
  name: "Search",
  components: {BottomNavBar, PullRefreshList, ActItem},
  setup(){
    return {
      searchAct: actApi.search
    }
  },
  created() {
    this.initCats()
  },
  data(){
    return {
      key: '',
      params: ['', 0, '', false],
      catId: 0,
      catOptions: [
        {text: '全部分区', value: 0}
      ],
      sortValue: '',
      sortOptions: [
        {text: '默认排序', value: ''},
        {text: '开始时间顺序', value: 'start_asc'},
        {text: '开始时间逆序', value: 'start_desc'},
        {text: '结束时间顺序', value: 'end_asc'},
        {text: '结束时间逆序', value: 'end_desc'},
      ]
    }
  },
  methods: {
    gotoActInfo(actId){
      actPage.info(actId).open().blank()
    },
    gotoCreateAct(){
      actPage.create().open().blank()
    },
    async initCats(){
      let cats = await catApi.listCat()
      this.catOptions.push(...cats.map(item=>{
        return {text: item.cat, value: item.catId}
      }))
    },
    search(){
      this.params[0] = this.key
      this.$refs.actList.onRefresh()
    },
    catChange(value){
      this.params[1] = value
      this.$refs.actList.onRefresh()
    },
    sortChange(value){
      switch (value){
        case '':{
          this.params[2] = ''
          break
        }
        case 'start_asc':{
          this.params[2] = 'start'
          this.params[3] = false
          break
        }
        case 'start_desc':{
          this.params[2] = 'start'
          this.params[3] = true
          break
        }
        case 'end_asc':{
          this.params[2] = 'end'
          this.params[3] = false
          break
        }
        case 'end_desc':{
          this.params[2] = 'end'
          this.params[3] = true
          break
        }
      }
      this.$refs.actList.onRefresh()
    }
  }
})
</script>

<template>
  <div class="search-container-div">
    <van-search v-model="key" placeholder="请输入搜索关键词" @search="search"/>
    <van-sticky>
      <van-dropdown-menu>
        <van-dropdown-item v-model="catId" :options="catOptions" @change="catChange"/>
        <van-dropdown-item v-model="sortValue" :options="sortOptions" @change="sortChange"/>
      </van-dropdown-menu>
    </van-sticky>
    
    
    <PullRefreshList :load-func="searchAct" :params="params" ref="actList">
      <template v-slot:list="{list}">
        <div v-for="(item, index) in list">
          <ActItem
              :act="item.act"
              :user="item.user"
              :apply="item.apply"
              @actClick="gotoActInfo"
          />
          <div class="separator-line"/>
        </div>
      </template>
    </PullRefreshList>
    
    
  </div>
  
  <BottomNavBar>
    <template v-slot:center>
      <van-button
          round
          color="rgba(239, 239, 245, 1)"
          size="mini"
          style="width: 100%"
          @click="gotoCreateAct"
      >
        <div class="create-act-button-div">
          <van-icon size="18" :name="require('@/assets/icon/edit-box-line.svg')"/>
          <span>创建活动</span>
        </div>
      
      </van-button>
    </template>
  </BottomNavBar>
  
  <van-back-top />
</template>

<style scoped lang="less">
@import "@/assets/style/less/all.less";
.search-container-div {
  display: flex;
  flex-direction: column;
}

.create-act-button-div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: @create_comment_button_color;
  span:last-child{
    margin-left: 4px;
  }
}
</style>